<template>
	<view>
		<!-- 自定义导航栏 -->
		<uni-nav-bar backgroundColor="" color="#000000" left-icon="back" statusBar="true" title="添加居民">
		    <view slot="left">
		     <i class="iconfont icon-fanhui" @click="userlist">返回</i>
		    </view>
		   </uni-nav-bar>
		   
		   <view class="typeface">
		   	<text>居民信息</text>
		   </view>
		   
		   <form>
		   <view class="uni-common-pl">楼栋房号
				<picker :range="years" @change="yearChange" mode="multiSelector">
		   			    {{  years[0][yearsIndex1] }}
		   		</picker>
				</view>
				
				<view class="nameitem">姓名
					<input type="text" value="" placeholder="请填写姓名"/>
				</view>
				
				<view class="shen">身份证
					<input type="text" value="" placeholder="请填写身份证"/>
				</view>
				
				<view class="uni-title uni-common-pl">性别			
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array" >
							{{array[index]}}
						</picker>
					</view>	
				</view>
				
				<view class="phone">联系电话
					<input type="text" value="" placeholder="请填写电话"/>
				</view>
				<view class="anniu">
					<button type="primary">提交</button>
				</view>
				
			</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  array: ["请选择",'男', '女'],
				    index: 0,
							
							
				 years:[
				        ["选择楼栋", 1998, 1999, 2000],
				        ["选择单元", 11, 12, 13],
						["选择门号", 11, 12, 13]
				    ],
						yearsIndex1: 0,
				        yearsIndex2: 0
			}
		},
		methods: {
			userlist(){
				uni.navigateTo({
				    url: '../Myhouse/Myhouse'
				})
			},
			
			 bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.index = e.target.value
			        },
			 
			 
			   yearChange:function(e){
			                 console.log(e)
			                 //获得对象的 detail的 value
			                 //通过数组的下标改变显示在页面的值
			                 this.index = e.detail.value[0];
			                 this.index2 = e.detail.value[1];
			             }
		},
		  computed: {
		       
		    },
	}
</script>

<style lang="less">
@import url("../../static/css/useradd/useradd.less");
</style>
